<template>
	<div class="tabbar">
		<van-tabbar v-model="active" active-color="#FE7700" inactive-color="#1A1A1A" route>
			<van-tabbar-item replace to="/">
				<span>首页</span>
				<img slot="icon" slot-scope="props" :src="props.active ? icon.active : icon.inactive">
			</van-tabbar-item>
			<van-tabbar-item replace to="/station">
				<span>选站</span>
				<img slot="icon" slot-scope="props" :src="props.active ? icon2.active : icon2.inactive">
			</van-tabbar-item>
			<van-tabbar-item replace  @click="askPage">
				<span>问问</span>
				<img slot="icon" slot-scope="props" :src="props.active ? icon3.active : icon3.inactive">
			</van-tabbar-item>
			<van-tabbar-item replace to="/user">
				<span>我的</span>
				<img slot="icon" slot-scope="props" :src="props.active ? icon4.active : icon4.inactive">
			</van-tabbar-item>
		</van-tabbar>
	</div>
</template>

<script>
	import home_icon from "@/assets/img/footer/home.png"
	import home_active_icon from "@/assets/img/footer/home-active.png"
	import station_icon from "@/assets/img/footer/station.png"
	import station_active_icon from "@/assets/img/footer/station-active.png"
	import wenwen_icon from "@/assets/img/footer/wenwen.png"
	import wenwen_active_icon from "@/assets/img/footer/wenwen-active.png"
	import user_icon from "@/assets/img/footer/user.png"
	import user_active_icon from "@/assets/img/footer/user-active.png"
	export default {
		name: "navbar",
		components: {},
		data() {
			return {
				active: 0,
				icon: {
					active: home_active_icon,
					inactive: home_icon
				},
				icon2: {
					active: station_active_icon,
					inactive: station_icon
				},
				icon3: {
					active: wenwen_active_icon,
					inactive: wenwen_icon
				},
				icon4: {
					active: user_active_icon,
					inactive: user_icon
				}

			}
		},
		methods:{
			askPage(){
				let item = this.$localStorage.get("askData")
				this.$localStorage.set('firstLevel', item)
				this.$router.push({path:'/classify'})
			}
		}


	}
</script>

<style scoped>

</style>
